import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-change-child',
  template: `
    <div>
      Detach: <input type="checkbox" (change)="detachCD($event.target.checked)" />
    </div>
    <p>当前值：{{ counter }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChangeChildComponent implements OnInit {
  @Input() counter: number = 0;

  constructor(private cdRef: ChangeDetectorRef) {}

  ngOnInit() {
    setInterval(() => {
      this.counter ++;
      // 每隔一秒钟更新计数值同时调用 ChangeDetectorRef 对象上的 markForCheck() 方法，
      // 来标识该组件在下一个变化检测周期，需执行变化检测，从而更新视图。
      this.cdRef.markForCheck();
    }, 1000);
  }

  detachCD(checked: boolean) {
    //  detach() 和 reattach() 方法，它们用来开启/关闭组件的变化检测。
    if (checked) {
      this.cdRef.detach();
    } else {
      this.cdRef.reattach();
    }
  }
}
